<!-- 
// NAME: Reddit
// VERSION: 0.4
// AUTHOR: khanhas
// DESCRIPTION: Fetch playlists from subreddit.
 -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://local_resource_host/css/glue.css">
  <link rel="stylesheet" href="https://zlink.app.spotify.com/css/glue.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" class="spicetify-userCSS" href="https://zlink.app.spotify.com/css/user.css">
</head>
<body>
  <div id="reddit-setting-popover">
    <div class="modal-backdrop" data-interaction-intent="reddit-cancel"></div>
    <div class="popover modal" data-bind="css: modalClasses" data-interaction-context="modal-dialog">
      <h3 class="popover-title" data-bind="settingTitle">Setting</h3>
      <div class="popover-content">
        <div class="row">
          <div class="form-group col-sm-8 col-md-8 col-lg-8">
            <h4 data-bind="reddit-option-title">Options</h4>
            <div id="reddit-option"></div>
          </div>
          <div class="form-group col-sm-4 col-md-4 col-lg-4" id="reddit-subreddit">
            <h4 data-bind="reddit-form-title">Add subreddit</h4>
            <form id="subreddit-input-form">
              <input class="form-control" type="text" id="subreddit-input" maxlength="100" placeholder="Subreddit name" data-bind="reddit-form-placeholder"></input>
            </form>
            <div id="autocomplete"></div>
            <div id="reddit-subreddit-list"></div>
          </div>
        </div>
      </div>
      <div class="popover-footer" data-bind="visible: footerVisible" tabindex="-1">
        <button
          class="button button-with-stroke"
          data-interaction-intent="reddit-cancel"
        >
          <span data-bind="cancelButtonLabel">Cancle</span>
        </button>
        <button
          class="button button-green"
          data-interaction-intent="reddit-confirm"
        >
          <span data-bind="okButtonLabel">Apply</span>
        </button>
      </div>
    </div>
  </div>
  <div id="render-target"></div>
  <div id="reddit-youtube">
    <div class="modal-backdrop" data-interaction-intent="youtube-close"></div>
    <div id="youtube-container" class="popover"></div>
  </div>
  <div id="reddit-sortby-context-menu" class="context-menu-container" style="display: none;">
    <div class="context-menu" style="z-index:2; opacity: 1; display: inline-block; height: auto; width: auto;">
        <div class="item" data-bind="hot">
          <span class="text">Hot</span>
        </div>
        <div class="item" data-bind="new">
          <span class="text">New</span>
        </div>
        <div class="item" data-bind="top">
          <span class="text">Top</span>
        </div>
        <div class="item" data-bind="rising">
          <span class="text">Rising</span>
        </div>
        <div class="item" data-bind="controversial">
          <span class="text">Controversial</span>
        </div>
    </div>
  </div>
  <div id="reddit-sorttime-context-menu" class="context-menu-container" style="display: none;">
    <div class="context-menu" style="z-index:2; opacity: 1; display: inline-block; height: auto; width: auto;">
        <div class="item" data-bind="hour">
          <span class="text">Past Hour</span>
        </div>
        <div class="item" data-bind="day">
          <span class="text">Past Day</span>
        </div>
        <div class="item" data-bind="week">
          <span class="text">Past Week</span>
        </div>
        <div class="item" data-bind="month">
          <span class="text">Past Month</span>
        </div>
        <div class="item" data-bind="year">
          <span class="text">Past Year</span>
        </div>
        <div class="item" data-bind="all">
          <span class="text">Of All time</span>
      </div>
    </div>
  </div>
  <!-- "init.js" is served by the desktop client and provides the "window.__spotify" object. -->
  <script src="init.js"></script>
  <script src="bundle.js"></script>
</body>
</html>
